<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { SchoolDetail, getTrainingContent } from "@/http/api";

export default {
  components: { outMain },
  name: "",
  data() {
    return {
      detailId: this.$route.query.id,
      formData: {},
      talbeData: [],
      statusArr: [
        { label: "全部", value: "" },
        { label: "进行中", value: "1" },
        { label: "已结束", value: "2" },
      ],
      queryData: {
        school_id: this.$route.query.id,
        training_content_status: "",
        page: 1,
        per_page: 10,
      },
      total: 0,
    };
  },
  props: {},
  setup() {},
  methods: {
    backFn() {
      this.$router.back();
    },
    getData() {
      SchoolDetail(this.queryData).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
        }
      });
    },
    async getLess() {
      const { data } = await getTrainingContent(this.queryData);
      if (data.code == 1) {
        this.talbeData = data.data.data;
        this.total = data.data.total;
      }
    },
    detailFn(id) {
      this.$router.push({ path: "/sendTrainDetail", query: { id: id } });
    },
  },
  mounted() {},
  created() {
    this.getData();
    this.getLess();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formHead">
        <div>学校详情</div>
        <btn value="返回上一级" @ok="backFn"></btn>
      </div>
      <div class="formMain">
        <div class="whiteBox">
          <div class="comHead flexStart">
            <div class="comImg">
              <img :src="formData.school_logo" />
            </div>
            <div class="comInfo">
              <div class="comName">
                <div class="comNameText">{{ formData.school_name }}</div>
                <el-tag class="comNameTag" v-if="formData.school_status == 1"
                  >正常</el-tag
                >
                <el-tag
                  class="comNameTag"
                  type="danger"
                  v-if="formData.school_status == 2"
                  >禁用</el-tag
                >
              </div>
              <div class="comDes">
                <div class="comDesItem">{{ formData.school_address }}</div>
              </div>
              <div class="comTime">
                <div class="comTimeItem">
                  {{ formData.school_person }}({{
                    formData.school_person_mobile
                  }})
                </div>
                <div class="comTimeItem">
                  创建时间：{{ formData.create_time }}
                </div>
              </div>
            </div>
          </div>
          <div class="stepCont">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">
                <div>培训课程（{{ total }}）</div>
                <div class="serchRight">
                  <el-form class="flexCenter" :inline="true">
                    <el-form-item class="noBottom">
                      <el-select
                        v-model="queryData.training_content_status"
                        clearable
                        @change="getLess"
                        placeholder="请选择状态"
                      >
                        <el-option
                          v-for="item in statusArr"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <btn value="搜索" @click="getLess"></btn>
                  </el-form>
                </div>
              </div>
              <el-table
                class="tableMain"
                :data="talbeData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="training_number"
                  show-overflow-tooltip
                  label="培训编号"
                />
                <el-table-column
                  prop="training_name"
                  show-overflow-tooltip
                  label="培训名称"
                />
                <el-table-column show-overflow-tooltip label="培训费用">
                  <template #default="{ row }"
                    >{{ row.bm_total_money }}（元）</template
                  >
                </el-table-column>
                <el-table-column
                  prop="training_time"
                  show-overflow-tooltip
                  label="培训时长"
                />
                <el-table-column show-overflow-tooltip label="状态">
                  <template #default="{ row }">
                    <el-tag v-if="row.training_content_status == 1"
                      >进行中</el-tag
                    >
                    <el-tag type="info" v-if="row.training_content_status == 2"
                      >已关闭</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="create_time"
                  show-overflow-tooltip
                  label="创建时间"
                />
                <el-table-column width="60" show-overflow-tooltip label="操作">
                  <template #default="{ row }">
                    <div class="tableCtrl">
                      <div
                        class="greenText ctrlText"
                        @click="detailFn(row.training_content_id)"
                      >
                        详情
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="getData"
                  @current-change="getData"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
